<template>
  <h1>{{ msg.title }}</h1>
  <button @click="sum.count++">count is: {{ sum.count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <p> age is {{msg.age}}</p>
</template>

<script >
import { toRefs,reactive } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: Object,
      default: ()=>{}
    }
  },
  /*
  data() {
    return {
      count: 1
    }
  }
  */
  setup(props){
  //解构props对象

  const  {msg} = toRefs(props)

  console.log(msg)
   
   //构建响应式对象
   const sum = reactive({
      count:0
   })

   return {
     sum,
     msg
   }

  }
  
}
</script>
